<template>
  <div class="main-container">
    <div class="main-container__left">
      <div class="main-container__left--header">
        <el-input
          class="header-search"
          placeholder="搜索"
          v-model="form.search"
          clearable
          size="mini">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="header-btn">
          <i class="el-icon-plus"></i>
        </div>
      </div>
      <div class="main-container__left--body">
        <el-scrollbar class="scrollbar">
          <ChatList></ChatList>
        </el-scrollbar>
      </div>
    </div>
    <div class="main-container__right">
      <div class="message-view" v-if="currentChat > 0">
        <div class="message-view__hd">
          <div class="title">{{ chat.nickname }}</div>
        </div>
        <div class="message-view__bd">
          <el-scrollbar
            ref="msgScrollbar"
            :native="false"
            :noresize="true"
            style="height: 100%"
          >
            <div class="message-content">
              <div
                class="message-item"
                v-for="(item, index) in chat.messages"
                :key="index">
                <div class="message-system">
                  <div class="time-data">
                    {{ item.sendtime }}
                  </div>
                </div>
                <div :class="item.own == 0 ? 'left' : 'right'">
                  <img
                    class="avatar"
                    :src="item.avatar"
                    alt=""
                  />
                  <div class="content">
                    <div
                      class="bubble"
                      :class="item.own == 0 ? 'primary' : 'default'"
                    >
                      <div
                        class="bubble-cont"
                      >
                        <div class="pain">
                          <pre
                            v-html="item.msgContent"
                          ></pre>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="message-view__ft">
          <div class="content">
            <textarea
              id="editArea"
              class="text-area"
              v-model="msgContent"
              placeholder="请输入消息内容"
              @keydown="listen($event)"
              @keyup.enter.exact="enter"
              @keyup.ctrl.enter="ctrlEnter"
            ></textarea>
          </div>
          <div class="action">
            <span class="desc">按下Ctrl+Enter换行</span>
            <el-button @click="send">发送</el-button>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无消息" style="margin-top: 120px;"></el-empty>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import dayjs from 'dayjs'
import ChatList from '@/components/chatList'
export default {
  data () {
    return {
      form: {
        search: ''
      },
      msgContent: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'currentChat', 'chatList']),
    chat () {
      return this.chatList.find(item => item.id === this.currentChat)
    }
  },
  components: {
    ChatList
  },
  methods: {
    ...mapActions(['SendMessage']),
    send () {
      if (!this.msgContent) {
        this.$message({
          message: '请输入内容',
          type: 'error'
        })
        return
      }
      const message = {
        own: 1,
        avatar: this.userInfo.avatar,
        sendtime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        msgContent: this.msgContent
      }
      this.SendMessage({
        id: this.chat.id,
        message: message
      })
    },
    enter () {
      this.send()
      this.msgContent = ''
    },
    listen (event) {
      if (event.keyCode === 13) {
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.message-view {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: #F6FBF9;
  &__hd {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    line-height: 30px;
    background-color: #fff;
    .title {
      font-weight: 400;
      height: 25px;
      display: inline-block;
      font-size: 14px;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      text-decoration: none;
      color: #000;
      font-weight: 400;
      padding: 15px 0;
    }
  }
  &__bd {
    position: absolute;
    top: 51px;
    bottom: 180px;
    left: 0;
    right: 0;
    padding: 0 30px;
  }
  &__ft {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 180px;
    padding-right: 19px;
    background-color: #fff;
    .content {
      padding-top: 20px;
      .text-area {
        width: 100%;
        height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-left: 20px;
        outline: none;
        border: 0;
        font-size: 14px;
        background: transparent;
        box-sizing: border-box;
      }
    }
    .action {
      text-align: right;
      margin-top: 5px;
      .desc {
        color: #888;
        font-size: 12px;
        margin-left: 10px;
        margin-right: 7px;
      }
    }
  }
}
.message-content {
    .message-item {
        overflow: hidden;
        margin-bottom: 16px;
        .message-system {
            text-align: center;
            margin: 10px auto;
            max-width: 50%;
            .time-data {
                display: inline-block;
                font-size: 12px;
                padding: 1px 18px;
                color: #b2b2b2;
                border-radius: 2px;
            }
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 2px;
            float: left;
            cursor: pointer;
        }
        .content {
            overflow: hidden;
            .bubble {
                max-width: 500px;
                min-height: 1em;
                display: inline-block;
                vertical-align: top;
                position: relative;
                text-align: left;
                font-size: 14px;
                border-radius: 10px;
                margin: 0 10px;
                .bubble-cont {
                    word-wrap: break-word;
                    word-break: break-all;
                    min-height: 25px;
                    .pain {
                        padding: 5px 33px;
                        .picture {
                            display: block;
                            cursor: pointer;
                            max-width: 350px;
                            max-height: 240px;
                        }
                        .loading {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-top: -7px;
                            margin-left: -7px;
                        }
                    }
                    .img {
                        vertical-align: middle;
                    }
                }
                &.default {
                    color: #fff;
                    background-image: linear-gradient(to right, #6FDA86, #71D9D3);
                }
                &.primary {
                    background-color: #fff;
                }
                &:before, &:after {
                    position: absolute;
                    top: 14px;
                    border: 6px solid transparent;
                    content: " ";
                }
            }
        }
        .right {
            float: right;
            text-align: right;
            clear: right;
            .avatar {
                float: right;
            }
            .bubble {
                &:before, &:after {
                    left: 100%;
                }
                &:after {
                    border-left-color: #71D9D3;
                    border-left-width: 4px;
                }
            }
        }
        .left {
            float: left;
            width: 100%;
            .bubble {
                &:before, &:after {
                    right: 100%;
                }
                &:after {
                    border-right-color: #ffffff;
                    border-right-width: 4px;
                }
            }
        }
    }
}
</style>
